"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { PlusCircle } from "lucide-react"
import PostCard from "@/components/community/post-card"
import type { CommunityPost } from "@/types/community-post"

// Mock data
const initialPosts: CommunityPost[] = [
  {
    id: "1",
    author: {
      id: "user1",
      username: "音乐爱好者",
      email: "music_lover@example.com",
      avatar: "/placeholder.svg",
      followersCount: 100,
      followingCount: 50,
      createdAt: "2023-01-01",
    },
    content: "最近发现了一首超棒的歌！推荐给大家 🎵",
    timestamp: "2小时前",
    likes: 42,
    comments: 2,
    shares: 3,
    type: "text",
    location: {
      city: "深圳市",
      name: "南山区科技园",
    },
  },
  // ... more posts
]

export default function CommunityPage() {
  const [posts, setPosts] = useState(initialPosts)
  const router = useRouter()

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">社区</h1>
        <Button onClick={() => router.push("/community/post")}>
          <PlusCircle className="mr-2 h-4 w-4" />
          发布
        </Button>
      </div>

      <Tabs defaultValue="following" className="space-y-4">
        <TabsList>
          <TabsTrigger value="following">关注</TabsTrigger>
          <TabsTrigger value="recommend">推荐</TabsTrigger>
          <TabsTrigger value="hot">热门</TabsTrigger>
        </TabsList>
        <TabsContent value="following" className="space-y-4">
          {posts.map((post) => (
            <PostCard key={post.id} post={post} />
          ))}
        </TabsContent>
        <TabsContent value="recommend">
          <div className="text-center text-muted-foreground">暂无推荐内容</div>
        </TabsContent>
        <TabsContent value="hot">
          <div className="text-center text-muted-foreground">暂无热门内容</div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

